<template>
    <div class="project-wrapper content" >
        <!-- 内容区 -->
        <div class="fix-scrollbar main-content-with-page">
            <panel-card v-for="(panel, index) in showList"
                :key="index" :panel="panel"
                @edit="edit"
                @copyPanel="copyPanel"
                @editPanel="editPanel"
                @deletePanel="deletePanel"
                @exportPanel="exportPanel"
                @editPanelShow="editPanelShow">
            </panel-card>
        </div>

        <!-- 翻页 -->
        <div style="clear:both" v-if="showList.length > 0">
            <Page :total="page.total" :page-size="page.pageSize" :current="page.pageNum"
                @on-change="panelsizeChange"	 @on-page-size-change="panelcurrentChange" size="small" show-elevator show-sizer></Page>
        </div>

        <panel-edit ref="panelEdit"></panel-edit>
        <panel-full-screen ref="panelFullScreen"
            @exitFullScreen="exitFullScreen"
            :fullScreenDisplay="modal.fullScreenDisplay"
            :onePanel="onePanel">
        </panel-full-screen>
    </div>
</template>

<script>

import fullModal from '@/components/common/fullmodal.vue'
import panelCard from './panel-card'
import panelEdit from './panel-edit'
import panelFullScreen from './panel-full-screen.vue'


// 面板列表
import util from 'util'
import getData from 'getData'

export default {
    components: {
        panelCard,panelEdit,fullModal,panelFullScreen
    },
    KeyUpEsc:function(){
    },
    data() {
        return {
            modal:{
                panelDetails:false,
                fullScreenDisplay:false,
            },
            createName:null,
            showCount:0,
            showList:[],
            args:{showList:[]},
            page:{ //分页数据
                pageSize: 20,
                pageNum: 1,
                params:{
                },
            },
            onePanel:{},
            panelId:null,
            full:false,
            isMount: false
        }
    },
    watch:{
        full(value){
            if(value){
                this.modal.fullScreenDisplay = true;
            }else{
                this.modal.fullScreenDisplay = false;
            }
        },
    },
    methods:{
        edit(panel){
            this.$refs.panelEdit.show(panel);
        },
        addPanel(){  //新增面板
            this.$router.push({
                path:'/panel/configuration',
                query:{
                    id:0,
                }
            });
        },
        editPanelShow(panel, no){  //全屏查看面板
            if (!no) {
              window.parent.postMessage('full', '*')
            }
            var _this = this;
            this.onePanel = panel;
            this.panelId = panel.layoutId;
            var de = document;
            if (!document.fullscreenElement) {
              document.documentElement.requestFullscreen()
            } else if (de.requestFullscreen) {
                de.requestFullscreen();
            } else if (de.mozRequestFullScreen) {
                de.mozRequestFullScreen();
            } else if (de.webkitRequestFullScreen) {
                de.webkitRequestFullScreen();
            }
            this.full = true;
        },
        exitFullScreen(){
            window.parent.postMessage('exit', '*')
            if (document.fullscreenElement) {
              document.exitFullscreen()
            }
            this.full = false;
        },
        // editPanelScan(panel){  //浏览面板
        //     this.modal.panelDetails = true;
        //     this.panelId = panel.layoutId;
        //     this.onePanel = panel;
        // },
        editPanel(panel){ //编辑面板
            this.$router.push({
                path:'/panel/configuration',
                query:{
                    id:panel.layoutId,
                }
            });
        },
        exportPanel(panel){
            let image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = function() {
                let canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                let context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                let a = document.createElement("a"); // 生成一个a元素
                let event = new MouseEvent("click"); // 创建一个单击事件
                a.download = panel.layoutName; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = panel.layoutUrl;
        },
        copyPanel(panel){
            this.$Modal.confirm({
                title: '提示',
                content: '确定要复制该面板吗？',
                onOk: () => {
                    getData.get("copyLayout",{},panel.layoutId).then((res) => {
                        if(res.status == 200 && res.data.code =='000'){
                            this.$Message.success(panel.layoutName + '面板复制成功!');
                            this.queryLayoutList();
                        }else{
                            this.$Message.error('复制失败，请检查网络或者联系管理员!');
                        }
                    });
                }
            });
        },
        deletePanel(panel){
            this.$Modal.confirm({
                title: '提示',
                content: '确定要删除该面板吗？',
                onOk: () => {
                    getData.get("deleteLayout",{},panel.layoutId).then((res) => {
                        if(res.status == 200 && res.data.code =='000'){
                            this.$Message.success(panel.layoutName + '面板删除成功!');
                            this.queryLayoutList();
                        }else{
                            this.$Message.error('删除失败，请检查网络或者联系管理员!');
                        }
                    });
                }
            });
        },
        queryLayoutList(init){
            if(init !== true){
                this.page.pageNum=1;
            }
            this.page.params.status = '1'
            getData.post("queryLayoutList",this.page).then((res) => {
                if(res.status == 200 && res.data.code =='000'){
                    this.showList = res.data.data;
                    this.page.total = res.data.total;
                    // 默认展开第一个大屏
                    // if (this.showList.length > 0 && !this.isMount) {
                    //   this.editPanelShow(this.showList[0], true)
                    //   this.isMount = true
                    // }
                }else{
                    this.$Message.error('查询面板列表失败，请检查网络或者联系管理员!');
                }
            });
            this.queryLayoutCountList();
        },
        queryLayoutCountList(){
            getData.get("queryLayoutCountList").then((res) => {
                if(res.status == 200 && res.data.code =='000'){
                    this.showCount = res.data.data.length;
                }else{
                    this.$Message.error('查询所有面板失败，请检查网络或者联系管理员!');
                }
            });
        },
        //页码 每页显示条数改变请求分页查询
        panelsizeChange(current) {
            this.page.pageNum = current;
            this.queryLayoutList(true);
        },
        panelcurrentChange(size) {
            this.page.pageSize = size;
            this.queryLayoutList();
        },
    },

    mounted(){
        this.queryLayoutList();
    }
}
</script>

<style lang="less">
.project-wrapper{
    .title-div{
        height: 21px;
    }
}
</style>

